<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <title>下拉列表</title>
    <style>
            * {
                margin: 0px;
                padding: 0px;
            }
            .main-box {
                width: 400px;
                height: auto;
                background-color:palevioletred;
                margin: 0 auto;
            }
            header {
                width: 100%;
                height: 100px;
                background-color:wheat;
            }
            section {
                width: 100%;
                height: auto;
                display: flex;                 
                flex-direction:column;             /* 元素排列方向*/
                flex-wrap:nowrap;               /* 换行方式:不换行*/
                justify-content:space-around;   /*元素排列格式*/
                align-items:center;             /*元素排列*/
            }
            footer {
                width: 100%;
                height: 100px;
                background-color:thistle;
            }
            .box {
                width: 100%;
                height: auto;
                display: block;
                background-color:tan;
                border: 2px red solid;
                cursor:pointer;
            }
            span {
                display: block;
            }
            .hide {
                width: 100%;
                height: 200px;
                display: none;
            }
    </style>
</head>


<body>

    <!-- 居中大盒子 -->
    <div class="main-box">
        <!-- 头部 -->
        <header></header>
        <!-- 身体 -->
        <section>
            <div class="box">000000
                <div class="hide">
                    <li>1111</li>
                    <li>2222</li>
                    <li>3333</li>
                </div>
                

            </div>

            <div class="box">0000000
                <div class="hide">
                    <li>1111</li>
                    <li>2222</li>
                    <li>3333</li>
                </div>
            </div>

            <div class="box">000000000
                <div class="hide">
                    <li>1111</li>
                    <li>2222</li>
                    <li>3333</li>
                </div>
            </div>
            <div class="box">000000000
                <div class="hide">
                    <li>1111</li>
                    <li>2222</li>
                    <li>3333</li>
                </div>
            </div>
            <div class="box">000000000
                <div class="hide">
                    <li>1111</li>
                    <li>2222</li>
                    <li>3333</li>
                </div>
            </div>
        </section>
        <!-- 脚部 -->
        <footer></footer>
    </div>
    <!-- 脚本 -->

    <script>
        $('.box').bind('click', function() {
            $(".box").find(".hide").css("display","none");
            $(this).find(".hide").css('display','block');
        });

        $('header').bind('click', function() {
            $(".box").find(".hide").css("display","none");
        });
        $('footer').bind('click', function() {
            $(".box").find(".hide").css("display","none");
        });


    </script>

</body>
</html>